<script setup lang="ts">
import { nextTick } from 'vue'
import useHeaderStore from '@/store/header'

interface Props {
  name: string
  activeUrl: string
  url: string
}
const props = defineProps<Props>()

const $store = useHeaderStore()
const { handleCloseDrawer } = $store

const $emit = defineEmits(['change'])

const handleEnginChange = (engin: Props) => {
  $emit('change', engin)

  nextTick(() => {
    handleCloseDrawer()
  })
}
</script>

<template>
  <a-card class="card-class" hoverable @click="handleEnginChange(props)">
    <div class="flex flex-col items-center">
      <img :src="props.url" :alt="props.name" />
      <div>{{ props.name }}</div>
    </div>
  </a-card>
</template>

<style lang="scss" scoped>
.card-class {
  width: 5rem;
  height: 5rem;
  margin-right: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  :deep(.ant-card-body) {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  img {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 6px;
  }
}
</style>
